<template>
	<view :style="{ height: conentHeight + 'px;' }">
		<view class="top-height">
			<view class="page-top-box">
				<view class="search-box flex ac">
					<u-search
						borderColor="#DADADA"
						bgColor="#ffffff"
						placeholder="搜索客户名称"
						v-model="searchForm.name"
						:showAction="false"
						@search="searchFunc"
						@clear="searchFunc"
					></u-search>
					<view class="search-btn flex ac" @click="searchShow = true" :style="searchShow ? 'color:#3B75FF;' : ''">
						筛选
						<text class="iconfont icon-shaixuan" :style="searchShow ? 'color:#3B75FF;' : ''"></text>
					</view>
					<u-button
						v-if="$isPer(per_arr, ['user_addUser'])"
						@click="navToAddFunc"
						customStyle="width: 156rpx;height: 64rpx;background: #3B75FF;border-radius: 32rpx;border-color:#F8F8FA;font-weight: 400;font-size: 26rpx;color: #ffffff;margin-left:20rpx;"
						:hairline="false"
						text="添加客户"
					></u-button>
				</view>
			</view>
		</view>
		<view class="list-content-box" :style="{ height: 'calc(100% - ' + topHeight + 'px);' }">
			<z-paging ref="paging" :fixed="false" v-model="dataList" @query="queryList" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<template slot="empty">
					<u-empty icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png" text=" "></u-empty>
				</template>
				<view class="list-items flex ac flex-wrap" v-for="(item, index) in dataList" :key="index" @click.stop="navToDetailFunc(item)">
					<view class="list-items-title flex ac jb" v-if="$fieldShowFunc('kh_khxm')">
						<view class="title u-line-1">
							{{ item.name || '--' }}
						</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('kh_khlx')">
						<view class="title">客户类型</view>
						<view class="desc u-line-1">
							<template v-if="item.customer_type == 1">VIP客户</template>
							<template v-if="item.customer_type == 2">优质客户</template>
							<template v-if="item.customer_type == 3">普通老客户</template>
							<template v-if="item.customer_type == 4">优质新客户</template>
							<template v-if="item.customer_type == 5">普通新客户</template>
							<template v-if="!item.customer_type">--</template>
						</view>
					</view>
					<!-- <view class="list-items-item flex ac list-items-item-width50">
						<view class="title">客户经理</view>
						<view class="desc u-line-1">（无关联）</view>
					</view> -->
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('kh_yqyxms')">
						<view class="title">已签约项目数</view>
						<view class="desc u-line-1">{{ item.signed_contracts_num + '' || '--' }}</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('kh_yqxs')">
						<view class="title">已取消数</view>
						<view class="desc u-line-1">{{ item.cancel_num + '' || '--' }}</view>
					</view>
					<view class="list-items-item flex ac" v-if="$fieldShowFunc('kh_lxfs')">
						<view class="title">联系方式</view>
						<view class="desc u-line-1">{{ item.phone || '--' }}</view>
					</view>
					<!-- 按钮 -->
					<view style="width: 100%">
						<judgeBtn plain :per_arr="per_arr" :btns="btns" :state="1" :item="item" @change="btnsChange"></judgeBtn>
					</view>
				</view>
			</z-paging>
		</view>
		<!-- 筛选弹窗 -->
		<u-popup :show="searchShow" round="30" @close="searchShow = false" closeable>
			<view class="search-popup-title">全部筛选</view>
			<scroll-view scroll-y class="search-popup-box">
				<view class="search-items">
					<view class="search-items-title">联系方式</view>
					<u--input maxlength="11" type="digit" v-model="searchForm.phone" placeholder="联系方式" border="surround"></u--input>
				</view>
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>客户类型</text>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view
							@click="searchSelectFunc('customer_type', item)"
							class="search-items-list-item"
							:class="searchForm.customer_type == item.value ? 'search-items-list-item-active' : ''"
							hover-class="hover-class"
							v-for="(item, index) in customerTypeList"
							:key="index"
						>
							{{ item.label }}
						</view>
					</view>
				</view>
				<view class="search-items">
					<view class="search-items-title">已签约项目数</view>
					<u--input v-model="searchForm.signed_contracts_num" type="digit" placeholder="已签约项目数" border="surround"></u--input>
				</view>
				<view class="search-items">
					<view class="search-items-title">已取消项目数</view>
					<u--input v-model="searchForm.cancel_num" type="digit" placeholder="已签约项目数" border="surround"></u--input>
				</view>
				<!-- <view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>客户经理</text>
						<view class="search-items-title-right flex ac jc" hover-class="hover-class">
							<text class="txt">收起</text>
							<u-icon name="arrow-up" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view
							class="search-items-list-item"
							:class="searchForm.customer_type == item.value ? 'search-items-list-item-active' : ''"
							hover-class="hover-class"
							v-for="(item, index) in 5"
							:key="index"
						>
							KOI
						</view>
						<view class="search-items-list-more flex ac jc" hover-class="hover-class">
							<text class="txt">查看更多</text>
							<u-icon name="arrow-down" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
				</view> -->
			</scroll-view>
			<view class="btn-box flex ac jb">
				<u-button
					@click="reSearchValFunc"
					text="重置"
					customStyle="width: 248rpx;height: 82rpx;background: #242834;border-radius: 12rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;"
				></u-button>
				<u-button
					@click="searchFunc"
					text="查询"
					customStyle="width: 422rpx;height: 82rpx;background: #3B75FF;border-radius: 12rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;"
				></u-button>
			</view>
		</u-popup>
		<!-- 操作组件 -->
		<customerOperate :value.sync="per_name" :oper_item="oper_item" @submit="handleSubmit"></customerOperate>
	</view>
</template>

<script>
export default {
	name: 'customerManagement',
	props: {
		conentHeight: {
			default: 0
		},
		option: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			searchShow: false,
			dataList: [],
			searchForm: {
				name: '',
				phone: '',
				customer_type: '',
				signed_contracts_num: '',
				cancel_num: ''
			},
			topHeight: 0,
			customerTypeList: [
				{
					label: 'VIP客户',
					value: 1
				},
				{
					label: '优质客户',
					value: 2
				},
				{
					label: '普通老客户',
					value: 3
				},
				{
					label: '优质新客户',
					value: 4
				},
				{
					label: '普通新客户',
					value: 5
				}
			], //客户类型
			per_arr: [],
			// 操作按钮
			btns: [
				{
					per_name: 'user_editMsg',
					state: 1,
					name: '编辑'
				},
				{
					per_name: 'user_del',
					state: 1,
					name: '删除'
				}
			],
			// 操作相关
			per_name: '',
			oper_item: {}
		};
	},
	mounted() {
		this.getHeight();
		// 获取权限
		this.$Api
			.getHtmlAuthority({
				path: '/customerManagement'
			})
			.then((res) => {
				console.log(res, 'getHtmlAuthority');
				if (res.code == 200) {
					this.per_arr = res.data.permission;
				}
			});
	},
	watch: {},
	methods: {
		// 刷新修改当前操作item
		refreshItemFunc() {
			console.log('刷新当前数据');
			let oper_item = this.oper_item;
			let index = this.dataList.findIndex((item) => {
				return item.id == oper_item.id;
			});
			if (index == -1) return;
			this.$Apipc
				.getUserDetail({
					user_id: oper_item.id
				})
				.then((res) => {
					console.log(res, '项目详情');
					if (res.code == 200) {
						res.data.cancel_num = this.dataList[index].cancel_num;
						res.data.signed_contracts_num = this.dataList[index].signed_contracts_num;
						this.$nextTick(() => {
							this.dataList[index] = res.data;
							this.dataList.splice(0, 0);
						});
					}
				});
		},
		// 操作反馈
		handleSubmit(id) {
			let index = this.dataList.findIndex((item) => {
				return item.id == id;
			});
			this.dataList.splice(index, 1);
		},
		// 操作事件
		btnsChange(e) {
			console.log(e);
			this.per_name = e.per_name;
			this.oper_item = e.item;
		},
		// 重置弹窗筛选项
		reSearchValFunc() {
			this.searchForm = {
				name: '',
				phone: '',
				customer_type: ''
			};
			this.$nextTick(() => {
				this.searchFunc();
			});
		},
		// 刷新列表
		searchFunc() {
			this.$refs.paging.reload();
			this.searchShow = false;
		},
		getHeight() {
			// 创建节点查询
			let that = this;
			const systemInfo = uni.getSystemInfoSync();
			const query = uni.createSelectorQuery().in(that);
			query.select('.top-height').boundingClientRect();
			query.exec((res) => {
				that.topHeight = res[0].height + systemInfo.statusBarHeight + 20;
			});
		},
		// 去详情
		navToDetailFunc(item) {
			this.oper_item = item;
			uni.navigateTo({
				url: '/pagesB/customerDetail/customerDetail?id=' + item.id
			});
		},
		queryList(page, num) {
			this.getUserList(page, num);
		},
		// 客户列表
		getUserList(page, num) {
			let searchForm = this.searchForm;
			uni.showLoading({
				mask: true
			});
			this.$Apipc
				.getUserList({
					page,
					num,
					name: searchForm.name || '',
					phone: searchForm.phone || '',
					customer_type: searchForm.customer_type || '',
					signed_contracts_num: Number(searchForm.signed_contracts_num) || '',
					cancel_num: Number(searchForm.cancel_num) || ''
				})
				.then((res) => {
					uni.hideLoading();
					console.log(res, '客户列表');
					if (res.code == 200) {
						this.$refs.paging.complete(res.data.list);
					} else {
						this.$refs.paging.complete([]);
					}
				});
		},
		// 筛选弹窗选择项点击
		searchSelectFunc(type, item) {
			switch (type) {
				case 'customer_type':
					this.searchForm[type] = this.searchForm[type] == item.value ? '' : item.value;
					break;
				case '11':
					break;
				default:
			}
		},
		// 添加客户
		navToAddFunc() {
			uni.navigateTo({
				url: '/pagesC/customerManagement/addCustomer/addCustomer'
			});
		}
	}
};
</script>

<style lang="scss"></style>
